<template>
  <div class="shoping-car">
    <h1>Shoping Car</h1>
    <!-- 商品列表 -->
    <div class="product-list">
      <template v-for="item in myshops" :key="item.id">
        <slot :item="item">
          <ShopItem :item="item"></ShopItem>
        </slot>
      </template>
       
    </div>

    <!-- 购物车总结 -->
     <div class="cart-summary">
      <h3>Cart Summary</h3>
      <p>
        Total Items: <span>{{ myshops.length }}</span>
      </p>

      <p>
        Total Price: <span>${{ allPrice }}</span>
      </p>
      <button class="checkout-btn">Checkout</button>
     </div>
  </div>
</template>

<script setup lang="ts">

import { computed, ref } from 'vue';
import ShopItem from './ShopItem.vue';
import { type IShopInfo } from '@/types/shop';

// shops是Props解构出来的变量，他是只读的，不可以直接修改，需要从新定义变量接受他的值
const { shops } = defineProps < {
  shops:IShopInfo[]
} > ()
// 组件自己的ref对象，可以修改
const myshops = ref < IShopInfo[] > (shops)

/**
 * 添加商品
 * @param shop
 */
const addShop = (shop: IShopInfo) => {
  myshops.value.push(shop)
}

/**
 * 修改某个商品指定属性的值（ts:类型约束)
 * @param index
 * @param filed
 * @param val
 */

const editShop = <K extends keyof IShopInfo>(index: number, filed: K, val: IShopInfo[K]) => {
  myshops.value[index][filed]=val
}

// allPrice计算属性，它涉及不到修改值，所以可以直接使用 Props解构出来的值
const allPrice = computed(() => {
  return shops.reduce((pre, cur) => {
    return pre + cur.price * cur.count
  }, 0)
})

defineExpose({
  addShop,
  editShop
})



</script>

<style scoped>
/* 主体购物车样式 */
.shopping-cart {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f9f9f9;
}

/* 商品列表 */
.product-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 购物车总结 */
.cart-summary {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid #ccc;
  text-align: right;
}

.cart-summary h3 {
  margin-bottom: 10px;
}

.cart-summary p {
  font-size: 1.2em;
  margin: 5px 0;
}

.checkout-btn {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 1em;
}

.checkout-btn:hover {
  background-color: #0b7dda;
}

</style>